<template>
	<view class="content">
		<view class="user_part">
			<view class="user_info">
				<view class="user_l" @click="detail('publicForm', {title:'资料修改',tpl:'publicUserDetail',})">
					<view class="avatar">
						<image :src="pageData.portrait.url" mode=""></image>
					</view>
					<view class="user_detail">
						<view class="user_name">
							{{ pageData.nick_name || '未设置' }}
							<tui-tag type="warning" :scaleMultiple='0.7'>({{pageData.level_text}})</tui-tag>
						</view>
						<view class="user_id fl-center">
							<view class="">
								TEL：{{ pageData.tel_string || '未设置' }} >
							</view>
						</view>
					</view>
				</view>
				<view class="user_r">
					<!-- 					<view class="messages">
						<image src="../static/my/messages.png" mode=""></image>
						<view class="message_badge fl-center">
							<view class="">
								{{ message_count }}
							</view>
						</view>
					</view> -->
					<view class="settings" @click="detail('publicList', {title:'账户设置',tpl:'setting',})">
						<image src="../static/my/settings.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="ad1">
				<view class="tui-banner-swiper">
					<swiper class="tui-banner-box" :autoplay="true" :interval="8000" :duration="150" :circular="true" style="height: 170rpx;">
						<swiper-item v-for="(item, index) in pageData.banner1" :key="index" class="tui-banner-item">
							<image :src="item.small.url" class="tui-slide-image" mode="scaleToFill" @tap="detail('banner',item)" />
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="user_prop">
				<view class="prop_item" @click="detail('propertyData', item)" v-for="(item, index) in user.propertyData" :key="index" v-if="user.propertyData">
					<view class="prop_num">
						{{ item.value }}
					</view>
					<view class="prop_title">
						{{ item.text }}
					</view>
				</view>
			</view>

			<view class="dd_center">
				<view class="dd_title" @click="detail('orderList','all')">
					<view class="title_text">
						订单中心
					</view>
					<view class="all_check">
						查看全部订单 >
					</view>
				</view>

				<view class="dd_list">
					<view class="dd_item" @click="detail('orderList', item.key)" v-for="(item, index) in user.orderData" :key="index" v-if="user.orderData">
						<view class="dd_icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="dd_text">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>

			<view class="ad2">
				<view class="tui-banner-swiper">
					<swiper class="tui-banner-box" :autoplay="true" :interval="5000" :duration="150" :circular="true" style="height: 170rpx;">
						<swiper-item v-for="(item, index) in pageData.banner2" :key="index" class="tui-banner-item">
							<image :src="item.small.url" class="tui-slide-image" mode="scaleToFill" @tap="detail('banner',item)" />
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="my_service">
				<view class="dd_title">
					<view class="title_text">
						我的服务
					</view>
					<view class="all_check">

					</view>
				</view>

				<view class="service_list" v-for="(items, indexs) in user.actionData" :key="indexs" v-if="user.actionData">
					<view class="service_item" @click="detail(item.urlHref, item)" v-for="(item, index) in items" :key="index">
						<view class="service_icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="service_text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {
					loading: false,
					banner1: [],
					banner2: [],
					member_background_img: '',
					tel: '',
					real_name: '',
					nick_name: '',
					portrait: '',
					level_text: '',
					actionsheet: {
						show: false,
						tips: "",
						itemList: [],
						maskClosable: true,
						radius: true,
						isCancel: true,
						type: '',
						param: {},

					},
				},
				appInit: {},
				user: {},
			};
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			console.log("self:getData=>", that.get);
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
			that.appInit = that.tui.getCache("appInit");
			console.log('self:appInit=>', that.appInit);
			that.tui.upDataUserInfo(function(res) {
				that.user = res.data;
				console.log('self:user=>', that.user);
				that.initPageUserData();
				if (that.pageData.loading === false) {
					that.initialize();
				}
			});
		},
		methods: {
			initPageUserData() {
				let that = this;
				that.pageData.nick_name = that.user.userInfo.nick_name;
				that.pageData.real_name = that.user.userInfo.real_name;
				that.pageData.portrait = that.user.userInfo.portrait;
				that.pageData.tel = that.user.userInfo.tel;
				that.pageData.level_text = that.user.userInfo.level_text;
				that.$forceUpdate();
			},
			initialize() {
				let that = this;
				setTimeout(function() {
					that.__init();
				}, 100);
			},
			async __init() {
				let that = this;
				let response = {};
				response = await that.tui.get('/advert', {
					father_id: 4,
					page: 0,
				});
				that.pageData.banner1 = response.data.data;
				response = await that.tui.get('/advert', {
					father_id: 5,
					page: 0,
				});
				that.pageData.banner2 = response.data.data;
				that.pageData.loading = true;
			},
			async detail(type, item = {}) {
				let that = this;
				let paramsData = {};
				paramsData.title = item.title;
				if (typeof item.tpl !== 'undefined') {
					paramsData.tpl = item.tpl;
				}
				if (typeof item.key !== 'undefined') {
					paramsData.key = item.key;
				}
				if (typeof item.id !== 'undefined') {
					paramsData.id = item.id;
				}
				switch (type) {
					case 'banner':
						if (item.link !== null && that.tui.trim(item.link).length > 0) {
							window.location.href = item.link;
						} else {
							that.tui.urlHref('/pages/public-info?' + that.tui.initParamsData({
								title: item.title,
								id: item.id,
								tpl: 'banner',
							}));
						}
						break;
					case 'publicForm':
						that.tui.urlHref('/pages/public-form?' + that.tui.initParamsData(paramsData));
						break;
					case 'publicInfo':
						that.tui.urlHref('/pages/public-info?' + that.tui.initParamsData(paramsData));
						break;
					case 'publicList':
					case 'propertyData':
						that.tui.urlHref('/pages/public-list?' + that.tui.initParamsData(paramsData));
						break;
					case 'orderList':
						switch (typeof item) {
							case 'string':
								that.tui.urlHref('/pages/order-list?' + that.tui.initParamsData({
									key: item,
								}));
								break;
							case 'object':
								paramsData.key = 'all';
								that.tui.urlHref('/pages/order-list?' + that.tui.initParamsData(paramsData));
								break;
						}
						break;
					case 'goodsClick':
						that.tui.urlHref('/pages/good-info' + '?' + that.tui.initParamsData(paramsData));
						break;
					case 'achievement':
						that.tui.urlHref('/pages/achievement' + '?' + that.tui.initParamsData(paramsData));
						break;
					default:
						console.log(type, item);
						break;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
		padding-bottom: 80rpx;
	}

	.user_part {
		width: 690rpx;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}

	.user_info {
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 30rpx 0;

		.user_l {
			display: flex;
			align-items: center;
			height: 100rpx;

		}

		.user_r {
			display: flex;
			align-items: center;
			padding-top: 16rpx;
			box-sizing: border-box;
		}
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 23rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user_detail {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		.user_name {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 33rpx;
			margin-bottom: 10rpx;
		}

		.user_id {
			width: 189rpx;
			height: 30rpx;
			border-radius: 15rpx;
			border: 1px solid #999999;
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
			line-height: 33rpx;
		}
	}

	.messages {
		width: 36rpx;
		height: 36rpx;
		margin-right: 38rpx;
		position: relative;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.message_badge {
			min-width: 18rpx;
			min-height: 18rpx;
			background-color: #666666;
			padding: 4rpx;
			box-sizing: border-box;
			border-radius: 50%;
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			font-size: 12rpx;
			color: #FFFFFF;
		}
	}

	// /deep/ .u-badge {
	// 	font-size: 12rpx!important;
	// }

	.settings {
		width: 36rpx;
		height: 36rpx;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.ad1 {
		width: 690rpx;
		height: 160rpx;
		margin: 0 auto 10rpx;

		image {
			width: 690rpx;
			height: 160rpx;
		}
	}

	.ad2 {
		width: 690rpx;
		height: 160rpx;
		margin: 20rpx auto;

		image {
			width: 690rpx;
			height: 160rpx;
		}
	}

	.user_prop {
		width: 690rpx;
		margin: 0 auto;
		padding: 24rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.prop_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.prop_num {
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.prop_title {
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.dd_center {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 690rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.my_service {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.dd_title {
		width: 630rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.title_text {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}

		.all_check {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.dd_list {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.service_list {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// flex-wrap: wrap;
	}

	.dd_item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.dd_icon {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 10rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.dd_text {
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.service_item {
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.service_icon {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 10rpx;

			image {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.service_text {
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>